<template>
    <div class="view_wrap">

        <vue-scroll :ops="$root.scrollOpsY">

            <div class="flow-chart-box">
                <span class="flow-label">排空</span>
                <span class="flow-label">氮气瓶组</span>
                <span class="flow-label">15MPa氧加压机</span>
                <span class="flow-label">22MPa充补氧模块</span>
                <span class="flow-label">附近自来水厂</span>
                <span class="flow-label">除盐水制备装置</span>
                <span class="flow-label">纯水及配碱装置</span>
                <span class="flow-label">制氢装置</span>
                <span class="flow-label">电压、电流、氢气纯度、氢气泄漏</span>
                <span class="flow-label">格力生产车间</span>
                <span class="flow-label">20MPa储氧瓶</span>
                <span class="flow-label">排空</span>
                <span class="flow-label">除盐水冷却装置</span>
                <span class="flow-label">氢燃料电池</span>
                <span class="flow-label">氢气缓冲罐</span>
                <span class="flow-label">2个40立方</span>
                <span class="flow-label">20MPa压缩机</span>
                <span class="flow-label">22MPa充氢模块</span>
                <span class="flow-label">顺控模块</span>
                <span class="flow-label">氢槽车</span>
                <span class="flow-label">排空</span>
                <span class="flow-label">20MPa储氢罐</span>
                <span class="flow-label">45MPa压缩机</span>
                <span class="flow-label">45MPa充氢模块</span>
                <span class="flow-label">加氢机</span>
                <span class="flow-label">枪口压力：{{ valveState[26] | formatFlowValue }}MPa</span>
                <span class="flow-label">用氢车</span>
                <span class="flow-label">45MPa储氢罐</span>
                <span class="flow-label">45MPa储氢罐</span>
                <span class="flow-label">排空</span>

                <div>
                    <span class="flow-value">{{ valveState[16418] | formatFlowValue }} MPa</span>
                    <span class="flow-value is_left">入口压力 {{ valveState[16423] | formatFlowValue }} MPa</span>
                    <span class="flow-value">排气压力<br>{{ valveState[16419] | formatFlowValue }} MPa</span>
                    <span class="flow-value">排气温度<br>{{ valveState[16420] | formatFlowValue }} °C</span>
                    <span class="flow-value">{{ valveState[16421] | formatFlowValue }} MPa</span>
                    <span class="flow-value is_left">{{ valveState[16422] | formatFlowValue }} MPa</span>
                    <span class="flow-value">{{ valveState[16428] | formatFlowValue }} MPa</span>
                    <span class="flow-value is_top">{{ valveState[16425] | formatFlowValue }} MPa</span>
                    <span class="flow-value">{{ valveState[16429] | formatFlowValue }} MPa</span>
                    <span class="flow-value">入口压力<br/>{{ valveState[16430] | formatFlowValue }} MPa</span>
                    <span class="flow-value">排气压力<br/>{{ valveState[16433] | formatFlowValue }} MPa</span>
                    <span class="flow-value">排气温度<br/>{{ valveState[16434] | formatFlowValue }} °C</span>
                    <span class="flow-value">{{ valveState[16426] | formatFlowValue }} MPa</span>
                    <span class="flow-value is_left">{{ valveState[16427] | formatFlowValue }} MPa</span>
                    <span class="flow-value">{{ valveState[16435] | formatFlowValue }} MPa</span>

                    <span class="flow-value">{{ valveState[16431] | formatFlowValue }} MPa</span>
                    <span class="flow-value is_right">{{ valveState[16432] | formatFlowValue }} MPa</span>
                    <span class="flow-value is_top">入口压力<br/>{{ valveState[16436] | formatFlowValue }} MPa</span>
                    <span class="flow-value is_top">排气压力<br/>{{ valveState[16437] | formatFlowValue }} MPa</span>
                    <span class="flow-value">排气温度<br/>{{ valveState[16438] | formatFlowValue }} °C</span>
                    <span class="flow-value">{{ valveState[16439] | formatFlowValue }} MPa</span>
                    <span class="flow-value is_left">{{ valveState[16440] | formatFlowValue }} MPa</span>
                    <span class="flow-value">{{ valveState[16424] | formatFlowValue }} MPa</span>
                </div>

               <!-- <div>
                    <span class="flow-yljcd"></span>
                    <span class="flow-yljcd"></span>
                    <span class="flow-yljcd"></span>
                    <span class="flow-yljcd"></span>
                    <span class="flow-yljcd"></span>
                    <span class="flow-yljcd"></span>
                    <span class="flow-yljcd"></span>
                    <span class="flow-yljcd"></span>
                    <span class="flow-yljcd"></span>
                    <span class="flow-yljcd"></span>

                    <span class="flow-yljcd"></span>
                    <span class="flow-yljcd"></span>
                    <span class="flow-yljcd"></span>
                    <span class="flow-yljcd"></span>
                    <span class="flow-yljcd"></span>
                    <span class="flow-yljcd"></span>
                    <span class="flow-yljcd"></span>
                    <span class="flow-yljcd"></span>
                    <span class="flow-yljcd"></span>
                    <span class="flow-yljcd"></span>
                </div>-->

                <!--阀门-->
                <div >
                    <span :class="`flow-valve ${ valveState[0] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[1] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[2] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[3] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[4] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[5] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[14] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[11] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[9] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[7] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[12] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[8] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[10] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[13] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[15] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[16] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[20] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[21] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[18] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[17] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[19] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[22] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[23] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[15] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[24] ? 'is_close' : '' }`"></span>
                    <span :class="`flow-valve ${ valveState[26] ? 'is_close' : '' }`"></span>
                </div>

                <!--氧气罐-->
                <div>
                    <div class="flow-dqpz"></div>
                    <div class="flow-dqpz"></div>
                    <div class="flow-dqpz"></div>
                    <div class="flow-dqpz"></div>
                    <div class="flow-dqpz"></div>
                    <div class="flow-dqpz"></div>
                    <div class="flow-dqpz"></div>
                </div>

                <!--压缩机-->
                <div>
                    <span class="flow-ysj"></span>
                    <span class="flow-ysj"></span>
                </div>

                <!--氢模块-->
                <div>
                    <span class="flow-cbqmk"></span>
                    <span class="flow-cbqmk"></span>
                    <span class="flow-cbqmk"></span>
                </div>

                <span class="icon-snowflake"></span>
                <span class="icon-pointer"></span>

                <div class="flow-legend"></div>
            </div>

        </vue-scroll>

    </div>
</template>

<script>
    export default {
        components: {

        },
        data() {
            return {
                valveState: {

                },
            }
        },
        methods: {
            getData() {
                  this.$api.queryTempquery(
                      [
                          {
                              target: 'h2-01',
                              address: [
                                  0,
                                  16418,
                                  1,
                                  2,
                                  16419,
                                  16420,
                                  3,
                                  16421,
                                  4,
                                  16422,
                                  5,
                                  6,
                                  16423,
                                  16424,
                                  7,
                                  8,
                                  12,
                                  16427,
                                  16426,
                                  10,
                                  13,
                                  16425,
                                  9,
                                  11,
                                  16428,
                                  14,
                                  16429,
                                  15,
                                  17,
                                  16431,
                                  18,
                                  19,
                                  16432,
                                  16430,
                                  16,
                                  16433,
                                  16434,
                                  20,
                                  16435,
                                  21,
                                  16436,
                                  22,
                                  16437,
                                  16438,
                                  23,
                                  16439,
                                  24,
                                  16440,
                                  25,
                                  16441,
                                  26,
                              ],
                          }
                      ]
                  ).then(( res )=> {
                      var data = res[0].result || [];
                      var obj = {};

                      for( var i=0; i<data.length; i++ ) {
                        obj[ data[i].address ] = data[i].value;
                      }

                      this.valveState = obj;
                  })
            },
        },
        mounted() {
            this.getData();
        }
    }
</script>

<style lang="less">
    .view_wrap {
        background-color: #FFFFFF;
        background-image: url("../../assets/images/page/bg_page.png");
        background-size: 100% 100%;
        border-radius: 8px;
        position: relative;

        .flow-chart-box {
            width: 1544px;
            height: 832px;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            margin: 32px auto 32px;
            /*background-image: url("../../assets/images/overallProcess/bg_img_1.png");*/
            background-image: url("../../assets/images/overallProcess/bg_img_2.png");
            background-size: 100% 100%;

            >.flow-label {
                color: #0E1526;
                font-size: 14px;
                position: absolute;
                left: 126px;
                top: 13px;

                &:nth-of-type( 2 ) {
                    left: 402px;
                    top: 130px;
                }

                &:nth-of-type( 3 ) {
                    left: 839px;
                    top: 83px;
                }

                &:nth-of-type( 4 ) {
                    left: 1106px;
                    top: 115px;
                }

                &:nth-of-type( 5 ) {
                    left: 28px;
                    top: 289px;
                }

                &:nth-of-type( 6 ) {
                    left: 185px;
                    top: 290px;
                }

                &:nth-of-type( 7 ) {
                    left: 381px;
                    top: 289px;
                }

                &:nth-of-type( 8 ) {
                    left: 708px;
                    top: 289px;
                }

                &:nth-of-type( 9 ) {
                    color: #9A9FAF;
                    font-size: 12px;
                    left: 646px;
                    top: 306px;
                }

                &:nth-of-type( 10 ) {
                    left: 1135px;
                    top: 289px;
                }

                &:nth-of-type( 11 ) {
                    left: 1439px;
                    top: 298px;
                }

                &:nth-of-type( 12 ) {
                    left: 1417px;
                    top: 348px;
                }

                &:nth-of-type( 13 ) {
                    left: 135px;
                    top: 493px;
                }

                &:nth-of-type( 14 ) {
                    left: 411px;
                    top: 493px;
                }

                &:nth-of-type( 15 ) {
                    left: 587px;
                    top: 493px;
                }

                &:nth-of-type( 16 ) {
                    color: #9A9FAF;
                    font-size: 12px;
                    left: 592px;
                    top: 510px;
                }

                &:nth-of-type( 17 ) {
                    left: 757px;
                    top: 493px;
                }

                &:nth-of-type( 18 ) {
                    left: 1070px;
                    top: 493px;
                }

                &:nth-of-type( 19 ) {
                    left: 1292px;
                    top: 542px;
                }

                &:nth-of-type( 20 ) {
                    left: 1414px;
                    top: 493px;
                }

                &:nth-of-type( 21 ) {
                    left: 126px;
                    top: 653px;
                }

                &:nth-of-type( 22 ) {
                    left: 576px;
                    top: 666px;
                }

                &:nth-of-type( 23 ) {
                    left: 772px;
                    top: 666px;
                }

                &:nth-of-type( 24 ) {
                    left: 1070px;
                    top: 666px;
                }

                &:nth-of-type( 25 ) {
                    left: 1347px;
                    top: 666px;
                }

                &:nth-of-type( 26 ) {
                    left: 1405px;
                    top: 567px;
                }

                &:nth-of-type( 27 ) {
                    left: 1476px;
                    top: 666px;
                }

                &:nth-of-type( 28 ) {
                    left: 1078px;
                    top: 813px;
                }

                &:nth-of-type( 29 ) {
                    left: 911px;
                    top: 813px;
                }

                &:nth-of-type( 30 ) {
                    left: 1485px;
                    top: 800px;
                }
            }

            .flow-value {
                color: #0E1526;
                font-size: 14px;
                position: absolute;
                padding: 3px 7px;
                box-sizing: border-box;
                min-width: 80px;
                line-height: 20px;
                background-color: rgba(249, 250, 254, 0.8);
                border-radius: 4px;
                border: 1px solid #dddddd;
                text-align: center;

                &:after {
                    content: ' ';
                    position: absolute;
                    bottom: -8px;
                    left: 0;
                    right: 0;
                    margin: auto;
                    width: 0;
                    height: 0;
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                    border-top: 8px solid #F9FAFE;
                }

                &:before {
                    content: ' ';
                    position: absolute;
                    bottom: -10px;
                    left: 0;
                    right: 0;
                    margin: auto;
                    width: 0;
                    height: 0;
                    border-left: 6px solid transparent;
                    border-right: 6px solid transparent;
                    border-top: 10px solid #dddddd;
                }

                &.is_left {

                    &:after {
                        bottom: 0;
                        top: 0;
                        right: unset;
                        left: -8px;
                        border-top: 5px solid transparent;
                        border-bottom: 5px solid transparent;
                        border-right: 8px solid #F9FAFE;
                        border-left: unset;
                    }

                    &:before {
                        bottom: 0;
                        top: 0;
                        right: unset;
                        left: -10px;
                        border-top: 5px solid transparent;
                        border-bottom: 5px solid transparent;
                        border-right: 10px solid #dddddd;
                        border-left: unset;
                    }
                }

                &.is_right {

                    &:after {
                        bottom: 0;
                        top: 0;
                        left: unset;
                        right: -8px;
                        border-top: 5px solid transparent;
                        border-bottom: 5px solid transparent;
                        border-left: 8px solid #F9FAFE;
                        border-right: unset;
                    }

                    &:before {
                        bottom: 0;
                        top: 0;
                        left: unset;
                        right: -10px;
                        border-top: 5px solid transparent;
                        border-bottom: 5px solid transparent;
                        border-left: 10px solid #dddddd;
                        border-right: unset;
                    }
                }

                &.is_top {
                    text-align: left;

                    &:after {
                        top: -8px;
                        bottom: unset;
                        border-bottom: 8px solid #F9FAFE;
                        border-top: unset;
                    }

                    &:before {
                        top: -10px;
                        bottom: unset;
                        border-bottom: 10px solid #dddddd;
                        border-top: unset;
                    }
                }

                &:nth-of-type( 1 ) {
                    top: 39px;
                    left: 529px;
                }

                &:nth-of-type( 2 ) {
                    top: 119px;
                    left: 786px;
                }

                &:nth-of-type( 3 ) {
                    top: 3px;
                    left: 921px;
                }

                &:nth-of-type( 4 ) {
                    top: 3px;
                    left: 1003px;
                }

                &:nth-of-type( 5 ) {
                    top: 26px;
                    left: 1257px;
                }

                &:nth-of-type( 6 ) {
                    top: 114px;
                    left: 1276px;
                }

                &:nth-of-type( 7 ) {
                    top: 314px;
                    left: 175px;
                }

                &:nth-of-type( 8 ) {
                    top: 380px;
                    left: 478px;
                }

                &:nth-of-type( 9 ) {
                    top: 417px;
                    left: 508px;
                }

                &:nth-of-type( 10 ) {
                    top: 392px;
                    left: 660px;
                }

                &:nth-of-type( 11 ) {
                    top: 392px;
                    left: 868px;
                }

                &:nth-of-type( 12 ) {
                    top: 392px;
                    left: 950px;
                }

                &:nth-of-type( 13 ) {
                    top: 296px;
                    left: 871px;
                }

                &:nth-of-type( 14 ) {
                    top: 295px;
                    left: 1032px;
                }

                &:nth-of-type( 15 ) {
                    top: 406px;
                    left: 1246px;
                }

                &:nth-of-type( 16 ) {
                    top: 573px;
                    left: 436px;
                }

                &:nth-of-type( 17 ) {
                    top: 544px;
                    left: 669px;
                }

                &:nth-of-type( 18 ) {
                    top: 567px;
                    left: 838px;
                }

                &:nth-of-type( 19 ) {
                    top: 648px;
                    left: 893px;
                }

                &:nth-of-type( 20 ) {
                    top: 558px;
                    left: 961px;
                }

                &:nth-of-type( 21 ) {
                    top: 575px;
                    left: 1207px;
                }

                &:nth-of-type( 22 ) {
                    top: 670px;
                    left: 1242px;
                }

                &:nth-of-type( 23 ) {
                    top: 191px;
                    left: 497px;
                }
            }

            .flow-yljcd {
                width: 20px;
                height: 20px;
                background-image: url("../../assets/images/overallProcess/icon_yljcd.png");
                background-size: 100% 100%;
                position: absolute;

                &:nth-of-type( 1 ) {
                    top: 76px;
                    left: 561px;
                }

                &:nth-of-type( 2 ) {
                    top: 123px;
                    left: 755px;
                }

                &:nth-of-type( 3 ) {
                    top: 65px;
                    left: 952px;
                }

                &:nth-of-type( 4 ) {
                    top: 118px;
                    left: 1246px;
                }

                &:nth-of-type( 5 ) {
                    top: 65px;
                    left: 1288px;
                }

                &:nth-of-type( 6 ) {
                    top: 351px;
                    left: 193px;
                }

                &:nth-of-type( 7 ) {
                    top: 350px;
                    left: 508px;
                }

                &:nth-of-type( 8 ) {
                    top: 228px;
                    left: 527px;
                }

                &:nth-of-type( 9 ) {
                    top: 334px;
                    left: 900px;
                }

                &:nth-of-type( 10 ) {
                    top: 299px;
                    left: 1001px;
                }

                &:nth-of-type( 11 ) {
                    top: 608px;
                    left: 466px;
                }

                &:nth-of-type( 12 ) {
                    top: 453px;
                    left: 538px;
                }

                &:nth-of-type( 13 ) {
                    top: 452px;
                    left: 690px;
                }

                &:nth-of-type( 14 ) {
                    top: 549px;
                    left: 760px;
                }

                &:nth-of-type( 15 ) {
                    top: 537px;
                    left: 869px;
                }

                &:nth-of-type( 16 ) {
                    top: 453px;
                    left: 898px;
                }

                &:nth-of-type( 17 ) {
                    top: 618px;
                    left: 923px;
                }

                &:nth-of-type( 18 ) {
                    top: 674px;
                    left: 1211px;
                }

                &:nth-of-type( 19 ) {
                    top: 612px;
                    left: 1238px;
                }

                &:nth-of-type( 20 ) {
                    top: 443px;
                    left: 1276px;
                }
            }

            .flow-valve {
                position: absolute;
                width: 24px;
                height: 22px;
                background-image: url("../../assets/images/overallProcess/icon_valve_open.png");
                background-size: 100% 100%;

                &.is_close {
                    background-image: url("../../assets/images/overallProcess/icon_valve_close.png");
                }

                &:nth-of-type( 1 ) {
                    top: 8px;
                    left: 285px;
                }

                &:nth-of-type( 2 ) {
                    top: 70px;
                    left: 622px;
                }

                &:nth-of-type( 3 ) {
                    top: 16px;
                    left: 797px;
                }

                &:nth-of-type( 4 ) {
                    top: 58px;
                    left: 1091px;
                }

                &:nth-of-type( 5 ) {
                    top: 58px;
                    left: 1339px;
                }

                &:nth-of-type( 6 ) {
                    top: 177px;
                    left: 1244px;
                }

                &:nth-of-type( 7 ) {
                    top: 345px;
                    left: 127px;
                }

                &:nth-of-type( 8 ) {
                    top: 328px;
                    left: 389px;
                }

                &:nth-of-type( 9 ) {
                    top: 344px;
                    left: 440px;
                }

                &:nth-of-type( 10 ) {
                    top: 221px;
                    left: 613px;
                }

                &:nth-of-type( 11 ) {
                    top: 222px;
                    left: 902px;
                }

                &:nth-of-type( 12 ) {
                    top: 240px;
                    left: 843px;
                }

                &:nth-of-type( 13 ) {
                    top: 328px;
                    left: 832px;
                }

                &:nth-of-type( 14 ) {
                    top: 359px;
                    left: 768px;
                }

                &:nth-of-type( 15 ) {
                    top: 447px;
                    left: 485px;
                }

                &:nth-of-type( 16 ) {
                    top: 447px;
                    left: 734px;
                }

                &:nth-of-type( 17 ) {
                    top: 447px;
                    left: 1036px;
                }

                &:nth-of-type( 18 ) {
                    top: 437px;
                    left: 1336px;
                }

                &:nth-of-type( 19 ) {
                    top: 647px;
                    left: 285px;
                }

                &:nth-of-type( 20 ) {
                    top: 602px;
                    left: 406px;
                }

                &:nth-of-type( 21 ) {
                    top: 602px;
                    left: 714px;
                }

                &:nth-of-type( 22 ) {
                    top: 530px;
                    left: 827px;
                }

                &:nth-of-type( 23 ) {
                    top: 612px;
                    left: 1040px;
                }

                &:nth-of-type( 24 ) {
                    top: 606px;
                    left: 1298px;
                }

                &:nth-of-type( 25 ) {
                    top: 649px;
                    left: 1209px;
                }

                &:nth-of-type( 26 ) {
                    top: 792px;
                    left: 1365px;
                }
            }

            .flow-dqpz {
                position: absolute;
                width: 100px;
                height: 78px;
                background-image: url("../../assets/images/overallProcess/img_dqpz.png");
                background-size: 100% 100%;

                &:nth-of-type( 1 ) {
                    top: 47px;
                    left: 380px;
                }

                &:nth-of-type( 2 ) {
                    top: 579px;
                    left: 572px;
                }

                &:nth-of-type( 3 ) {
                    top: 722px;
                    left: 905px;
                }

                &:nth-of-type( 4 ) {
                    top: 722px;
                    left: 1072px;
                }

                &:nth-of-type( 5 ) {
                    top: 35px;
                    left: 1434px;
                }

                &:nth-of-type( 6 ) {
                    top: 126px;
                    left: 1434px;
                }

                &:nth-of-type( 7 ) {
                    top: 216px;
                    left: 1434px;
                }
            }

            .flow-ysj {
                width: 50px;
                height: 50px;
                position: absolute;
                background-image: url("../../assets/images/overallProcess/img_ysj.png");
                background-size: 100% 100%;

                &:after {
                    content: ' ';
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 20px;
                    margin: auto;
                    width: 25px;
                    height: 25px;
                    background-image: url("../../assets/images/overallProcess/icon_pointer.png");
                    background-size: 100% 100%;
                    animation: skewing 3s linear infinite alternate;
                }

                &:nth-of-type( 1 ) {
                    top: 432px;
                    left: 804px;
                }

                &:nth-of-type( 2 ) {
                    top: 588px;
                    left: 793px;
                }
            }

            .flow-cbqmk {
                width: 124px;
                height: 90px;
                position: absolute;
                background-image: url("../../assets/images/overallProcess/img_cbqmk.png");
                background-repeat: no-repeat;
                background-position: center center;

                &:nth-of-type( 1 ) {
                    top: 398px;
                    left: 1059px;
                }

                &:nth-of-type( 2 ) {
                    background-image: url("../../assets/images/overallProcess/img_cbqmk_1.png");
                    top: 20px;
                    left: 1105px;
                }

                &:nth-of-type( 3 ) {
                    background-image: url("../../assets/images/overallProcess/img_cbqmk_2.png");
                    top: 566px;
                    left: 1059px;
                }
            }

            >.icon-snowflake {
                position: absolute;
                width: 22px;
                height: 24px;
                background-size: 100% 100%;
                background-image: url("../../assets/images/overallProcess/icon_snowflake.png");
                animation: turn 10s linear infinite;
                top: 444px;
                left: 174px;
            }

            >.icon-pointer {
                position: absolute;
                left: 879px;
                top: 47px;
                width: 25px;
                height: 25px;
                background-image: url("../../assets/images/overallProcess/icon_pointer.png");
                background-size: 100% 100%;
                animation: skewing 3s linear infinite alternate;
            }
        }

        .flow-legend {
            position: absolute;
            width: 862px;
            height: 122px;
            background-image: url("../../assets/images/overallProcess/img_legend.png");
            background-size: 100% 100%;
            bottom: 0px;
            left: 0px;
        }
    }
</style>
